import { Statistics } from '@/types/statistics'
import { useEffect, useState } from 'react'
import style from './ContentCount.module.scss'
import Iconfont from '@/components/Iconfont';
import { queryAdminCount, queryContentCount } from '@/api/statistics';
export default function ContentCount() {
  const [adminCount,setAdminCount] = useState<Statistics.AdminCount>({
    userCount: 0,
    roleCount: 0,
  })
  const [contentCount,setContentCount] = useState<Statistics.ContentCount>({
    tagCount: 0,
    categoryCount: 0,
    articleCount: 0,
    linkCount: 0,
  });
  /**
 * 获取内容
 */
const getContentCount = async () => {
  const res = await queryContentCount();
  if (res.code === 200) {
    const { tagCount, categoryCount, linkCount, articleCount } = res.data || {};
    setContentCount({
      tagCount:tagCount || 0, 
      categoryCount:categoryCount || 0, 
      linkCount:linkCount || 0,
       articleCount:articleCount || 0
    })
  }
};
/**
 * 获取内容
 */
const getAlarmCount = async () => {
  const res = await queryAdminCount();
  if (res.code === 200) {
    const { userCount, roleCount} = res.data || {};
    setAdminCount({
      userCount:userCount||0, 
      roleCount:roleCount||0
    })
  }
};
useEffect(()=>{
  getAlarmCount()
  getContentCount()
},[])
  return (
    <div className={style['content-count__wrap']}>
    <div className={`${style['content-count__list']} flex flex--b`}>
      <div className={`${style['content-count__item']} float__block--g`}>
        <div className={`${style['content-count__icon']} flex`}>
          <Iconfont iconClass="icon-wenzhang" width="62" height="62" />
        </div>
        <div className={style['content-count__info']}>
          <div className={style['content-count__value']}>
            {contentCount.articleCount }
          </div>
          <div className={style['content-count__label']}>文章总数</div>
        </div>
      </div>
      <div className={`${style['content-count__item']} float__block--g`}>
        <div className={`${style['content-count__icon']} flex`}>
          <Iconfont iconClass="icon-yonghu" width="62" height="62" />
        </div>
        <div className="content-count__info">
          <div className="content-count__value">{ adminCount.userCount }</div>
          <div className="content-count__label">注册用户</div>
        </div>
      </div>
      <div className={`${style['content-count__item']} float__block--g`}>
        <div className={`${style['content-count__icon']} flex`}>
          <Iconfont iconClass="icon-fenlei" width="62" height="62" />
        </div>
        <div className={style['content-count__info']}>
          <div className={style['content-count__value']}>
            { contentCount.categoryCount }
          </div>
          <div className={style['content-count__label']}>文章分类</div>
        </div>
      </div>
      <div className={`${style['content-count__item']} float__block--g`}>
        <div className={`${style['content-count__icon']} flex`}>
          <Iconfont iconClass="icon-biaoqian2" width="62" height="62" />
        </div>
        <div className={style['content-count__info']}>
          <div className={style['content-count__value']}>{ contentCount.tagCount }</div>
          <div className={style['content-count__label']}>文章标签</div>
        </div>
      </div>
      <div className={`${style['content-count__item']} float__block--g`}>
        <div className={`${style['content-count__icon']} flex`}>
          <Iconfont iconClass="icon-haoyoulianjie" width="62" height="62" />
        </div>
        <div className={style['content-count__info']}>
          <div className={style['content-count__value']}>{ contentCount.linkCount }</div>
          <div className={style['content-count__label']}>友情链接</div>
        </div>
      </div>
    </div>
  </div>
  )
}
